import React from "react"
import { observer, inject } from "mobx-react"
import { LoginHeader } from "./login-header"
import { AntTabs, Input, AntdButton, Captcha } from "../../../components"
import { images } from "../../../assets"

import "./login.scss"

interface ILoginProps {
  rootStore?: any
  history?: any
}

const tabs2 = [{ title: "账号密码登录" }, { title: "手机快捷登录" }]

@inject("rootStore")
@observer
export class Login extends React.Component<ILoginProps, {}> {
  render() {
    const { loginStore } = this.props.rootStore
    const { history } = this.props
    return (
      <div className="bg-white pos-fixed login-container">
        <LoginHeader />
        <div className="main-container">
          <AntTabs
            tabs={tabs2}
            page={loginStore.tabPage}
            onChange={(tab: any, index: number) => loginStore.tabsOnChange(tab, index)}
          >
            <div className="login-content">
              <Input
                leftIcon={images.login.icons.logInUser}
                placeholder="请输入您的用户名"
                isOpenClear={loginStore.usernameOpenClear}
                clear={loginStore.usernameClear}
                value={loginStore.username}
                onChange={(e: any) => loginStore.usernameOnChange(e.target.value)}
              />
              <Input
                isPassword
                leftIcon={images.login.icons.password}
                placeholder="请输入您的密码"
                isOpenClear={loginStore.passwordOpenClear}
                value={loginStore.password}
                clear={loginStore.passwordClear}
                onChange={(e: any) => loginStore.passwordOnChange(e.target.value)}
                isPasswordOpen={loginStore.isPasswordOpen}
                changePasswordStyle={loginStore.changePasswordStyle}
              />
              <div className="login-config">
                <div className="login-remember" onClick={loginStore.rememberPswChange}>
                  {loginStore.rememberPswCheck ? (
                    <img alt="" className="remmber-icon" src={images.login.icons.rememberPswCheck} />
                  ) : (
                    <img alt="" className="remmber-icon" src={images.login.icons.rememberPswUnCheck} />
                  )}
                  <span className="remember-text">记住密码</span>
                </div>
                <div onClick={() => history.push("/forget-password")}>忘记密码</div>
              </div>
            </div>
            <div className="login-content">
              <Input
                isMobile
                mobileCode={loginStore.mobileCode}
                leftIcon={images.login.icons.logInMobile}
                placeholder="请输入您的手机号"
                isOpenClear={loginStore.mobileOpenClear}
                clear={loginStore.mobileClear}
                value={loginStore.mobile}
                onChange={(e: any) => loginStore.mobileOnChange(e.target.value)}
              />
              <Input
                isMsgInput
                msgCodeText="发送验证码"
                leftIcon={images.login.icons.logInVerification}
                placeholder="输入您的验证码"
                isOpenClear={loginStore.verificationOpenClear}
                clear={loginStore.verificationClear}
                value={loginStore.verification}
                onChange={(e: any) => loginStore.verificationOnChange(e.target.value)}
                sendMsg={loginStore.captchaShow}
              />
            </div>
          </AntTabs>

          <AntdButton type="primary" className="login-btn" onClick={loginStore.login}>
            登录
          </AntdButton>

          <AntdButton className="register-btn" onClick={() => history.push("/register")}>
            注册
          </AntdButton>
          <Captcha
            showCaptcha={loginStore.showCaptcha}
            captchaClose={loginStore.captchaClose}
            callback={(err: any, data: any) => loginStore.loginCallback(err, data)}
          />
        </div>
      </div>
    )
  }
}
